<template>
  <div>
    <button @click="componentId = 'Movie'">切换组件到Movie</button>
    <button @click="componentId = 'Count'">切换组件到Count</button>

    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>
  </div>
</template>

<script>
  /* 
    首先import放在函数中,只有当前被引入的组件被渲染的时候,这个函数才会调用,这里才会去引入Count组件
    webpack已经配置好了分开打包的功能,webpack在打包的时候,只要遇到import()就会把import方法引入的文件单独打包成一个文件
  */
  //必须要把import的结果返回出去，这样在等待异步组件的引入的时候才能知道当前的组件引入完成，才能去渲染
  const Count = () => {
    return import("./components/Count.vue");
  };
  const Movie = () => {
    return import("./components/Movie.vue");
  };
  export default {
    name: "App",
    data() {
      return {
        componentId: "",
      };
    },
    components: {
      Movie,
      Count,
    },
  };
</script>

<style></style>
